概述

今天將會紀錄實做上一篇所說的集中式 API，但目前的實做狀況卻遇到了問題(沒想到在快尾聲的時候遇到了建置問題😥)，希望能在明天解決。

實做

Step1: 首先就如上一篇所說在 src 檔案夾下建立一個 api.js 檔，並將 API 呼叫的方式放進一個變數中，那這邊會先嘗試使用 post 這個 API，要實現 GET 到所有 post 內容。

import axios from 'axios';
const postRequest = axios.create({
    baseURL: 'http://localhost:8080/api/posts'
  });
const postGet = ( ) => {
  postRequest.get( '' );
 };
 export { postGet }; 

Step2: 在 .vue 檔中引入 api.js，這邊的理解是引入後，就可以取得在 api.js 中匯出的 postGet 這個模組，如此就可以在 .vue 中取用模組，要記得修改路徑，程式碼如下:

<script>
import axios from "axios";
import { postGet } from "../api.js";
//get
postGet( )
.then( res => {
 console.log( res.data );
})
.catch( err => {
 console.log(err);
});

</script>

但使用上述的程式碼，並在使用 npm run dev 來跑專案後卻遇到 .then 不能使用的問題，錯誤如下:
Uncaught TypeError: Cannot read properties of undefined (reading 'then')

還未找到解決的方法，將持續查詢~
或是如果有大神能解惑的話，麻煩幫我在下方留言指引~ 萬分感激!

今天的實做就記錄到這裡，期待明天能解決問題~